<template>
	<div>
		<van-sticky>
			<header-top></header-top>
			
			<!-- <van-grid clickable :column-num="1">
				<van-grid-item>
					<template #icon>
						<van-image round width="6rem" height="6rem" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
					</template>
					<template #text>
						<van-row>颜旭升</van-row>
						<van-row>
							<van-tag type="warning">未实名</van-tag>
						</van-row>
					</template>
				</van-grid-item>
			</van-grid> -->
			
			<van-card  title="延续生"><!-- desc="描述信息" -->
				<template #thumb>
					<van-image round width="5rem" height="5rem" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
				</template>
				<template #title>
					<van-row><h2>颜旭升</h2></van-row>
					<van-row>
						<van-tag type="warning">未实名</van-tag>
					</van-row>
				</template>
				<!-- <template #tags>
					<van-tag plain type="danger">标签</van-tag>
				</template> -->
				<template #footer>
					<van-button icon="setting" size="small">编辑</van-button>
				</template>
			</van-card>
		</van-sticky>
		
		
		<!-- <van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">其他信息</van-divider> -->
		
		<van-cell-group title="分组1">
			<van-cell size="large" title="服务器环境测试" is-link to="/user_center/menu/service_testing" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
		</van-cell-group>
		<van-cell-group title="分组2">
			<van-cell size="large" title="单元格" value="内容" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
			<van-cell size="large" title="URL 跳转" is-link url="/vant/mobile.html" />
			<van-cell size="large" title="路由跳转" is-link to="index" />
		</van-cell-group>
		<br>
		<!-- <van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }">退出登录</van-divider> -->
		
		<center>
			<van-button round class="bottom-button" type="danger" @click="loginOut()">退 出 登 录</van-button>
		</center>
		<br>
		<!-- <van-divider :style="{ color: '#FFD801', borderColor: '#FFD801', padding: '0 16px' }"></van-divider> -->
		
		<tabbar-bottom></tabbar-bottom>
	</div>
</template>

<script>
import Vue from 'vue';
import { Card,Grid,GridItem,Divider } from 'vant';
import headerTop from '../Common/headerTop.vue';
import tabbarBottom from '../Common/tabbarBottom.vue';

Vue.use(Card);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Divider);
export default {
	data() {
		return {
			
		};
	},
	methods: {
		loginOut(){
			this.$dialog.confirm({
				message: '确定要退出登录吗',
				theme: 'round-button',
			}).then(() => {
				this.$delCookie('user_token');
				this.$delCookie('user_info');
				this.$router.push('/user_login');
			}).catch(() => {});
		}
	},
	components: { headerTop ,tabbarBottom },
};
</script>

<style scoped lang="less">
	.bottom-button {
	    width: 80%;
	    height: 40px;
	}
	.van-card:not(:first-child) {
	    margin-top: 0px;
		background-color: #FFFFFF;
	}
</style>
